<template>
  <div>
    <v-card>
      <v-card-title>

        <v-btn class="primary" @click="addBrand">新增品牌</v-btn>
        <v-spacer/>
        <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>

      </v-card-title>
      <v-divider></v-divider>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>

          <td class="text-xs-center" v-if="props.item.image"> <img :src="props.item.image"></td>
          <td class="text-xs-center" v-else> 无</td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="justify-center layout">
            <v-btn class="info" @click="editBrand(props.item)">修改</v-btn>
            <v-btn class="warning">删除</v-btn>
          </td>
        </template>
      </v-data-table>
    </v-card>


    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{edit ? "修改" :"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn @click="closeWindow" icon>
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <my-brand-form @close="closeWindow" :old-brand="oldBrand" :edit="edit"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>




  </div>
</template>

<script>

  import myBrandForm from "./MyBrandForm"

  export default {
    name: "MyBrand",
    components:{
      myBrandForm
    },
    data() {
      return {
        edit:false,
        oldBrand:{},
        totalBrands: 199, // 总条数
        key:"",
        show:false,
        brands: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [ // 头信息
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center',sortable:false}
        ]
      }
    },
    created() {
      this.getDataFromServer();
    },
    methods:{
      getDataFromServer(){
        ////从服务器获取数据，把返回的数据赋值给heima60
        this.$http.get("/item/brand/page",{
          params:{
            page:this.pagination.page,
            rows:this.pagination.rowsPerPage,
            sortBy:this.pagination.sortBy,
            desc:this.pagination.descending,
            key:this.key
          }
        })
          .then(({data})=>{

            this.brands = data.items;

            this.totalBrands = data.total;

            this.loading = false;
          }).catch(resp=>{
          console.log("请求失败")
        })
      },
      addBrand() {
        this.edit = false;
        this.show = true;

        //TODO 把brand传给子组件

      },
      closeWindow(){
        this.show = false;

        //当修改和新增成功之后应该应该刷新页面数据
        this.getDataFromServer();//定义这个方法，时候可以传参
      },
      editBrand(oldBrand){

        //根据oldBrand的id，查询对应的额分类信息

        this.$http.get("item/category/bid/"+oldBrand.id)
          .then(resp=>{
            //把查询到的分类的数组赋值给oldBrand的categories
            oldBrand.categories = resp.data;
            this.edit = true;
            this.show = true;
            //把传入的brand信息保存起来
            this.oldBrand = oldBrand;
          }).catch(resp=>{

            this.$message.error("分类数据查询失败，请重试")

        })




      }
    },
    watch:{
      key(){
        this.getDataFromServer();
      },
      pagination:{
        deep:true,
        handler(){
          this.getDataFromServer();
        }
      }
    }
  }
</script>

<style scoped>

</style>
